import { settings } from "./settings";
import TimeDate from "./Widgets/TimeDate";
import HitokotoCard from "./Widgets/HitokotoCard";
import Calendar from "./Widgets/Calendar";
import Note from "./Widgets/Note";

const widgets = [
  <TimeDate key="0" />,
  <Note key="1" />,
  <HitokotoCard key="2" />,
  <Calendar key="3" />,
];

const WidgetsScreen = () => (
  <>
    {settings.value.widget.items.map(({ id, show }) =>
      show ? (
        <div class="m-auto my-4 h-max break-inside-avoid" key={id}>
          {widgets[id]}
        </div>
      ) : (
        void 0
      ),
    )}
  </>
);

export default WidgetsScreen;
